{% extends "base.html" %}

{% block title %}NS.QTS{% endblock %}

{% block page_content_mobile %}
<div class="page-header" style="margin:0px">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title" style="font-size: small;">
                <i class="fa fa-pie-chart" aria-hidden="true"></i>
                Summary
            </h3>
        </div>
        <div class="panel-body">
            <table id="table_summary" style="font-size: medium"></table>
            <h1></h1>
            <canvas id="chart-line" height="150%"/>
        </div>
    </div>
    <div class="panel panel-default" style="display: none">
        <div class="panel-heading">
            <h3 class="panel-title" style="font-size: small;">
                <i class="fa fa-line-chart"></i>
                Balance
            </h3>
        </div>
        <div class="panel-body">
            <table id="table_tools" style="font-size: medium"></table>
        </div>
    </div>
</div>
<div class="panel-body">

</div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="{{ url_for('static', filename='bootstrap-table.js') }}"></script>
    <script src="{{ url_for('static', filename='Chart.js-2.5.0/dist/Chart.bundle.js') }}"></script>
    <script type="text/javascript">
        var lineChartData = {
            labels: [],
            datasets: [{
                lineTension: 0,
                pointRadius: 0,
                label: "BTC",
                fill: false,
                borderColor: '#fe305e',
                borderWidth: 0.5,
                backgroundColor: '#fe305e',
                data: [],
                yAxisID: "y-axis-1",
            }, {
                lineTension: 0,
                pointRadius: 0,
                label: "USD",
                fill: false,
                borderWidth: 0.5,
                borderColor: '#ffd64d',
                backgroundColor: '#ffd64d',
                data: [],
                yAxisID: "y-axis-2"
            }]
        };
        var config = {
            type: 'line',
            data: lineChartData,
            options: {
                responsive: true,
                hoverMode: 'index',
                stacked: false,
                title:{
                    display: true,
                    text:'Historical Data',
                    fontColor: '#c8c8c8',
                },
                legend: {
                    display: true,
                    labels: {
                        fontSize: 6
                    }
                },
                tooltips: {
						position: 'nearest',
						mode: 'index',
						intersect: false,
						yPadding: 10,
						xPadding: 10,
						caretSize: 8,
						borderWidth: 4
					},
                scales: {
                    xAxes: [{
                        ticks: {
                            fontSize: 6,
                            autoSkip: false,
                            maxTicksLimit: 8,
                            maxRotation: 0,
                            //stepSize: 24*3600
                        },

                        type: 'time',
                        time: {
                            displayFormats: {
                                day: 'MMM YY',
                                minute: 'h:mm a'
                            },
                            unit: 'day',
                            unitStepSize: 30,
                            maxTicksLimit: 4
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            fontSize: 6,
                        },
                        type: "linear",
                        display: true,
                        position: "left",
                        id: "y-axis-1",
                    }, {
                        ticks: {
                            fontSize: 6
                        },
                        type: "linear",
                        display: true,
                        position: "right",
                        id: "y-axis-2",

                        // grid line settings
                        gridLines: {
                            drawOnChartArea: false,
                        },
                    }],
                }
            }
        };

        var ctx1 = document.getElementById("chart-line").getContext("2d");
        var linechart_online_machines = new Chart(ctx1, config);

        function updatechart(data) {
            linechart_online_machines.config.data.labels = new Array()
            linechart_online_machines.config.data.datasets[0].data = new Array()
            linechart_online_machines.config.data.datasets[1].data = new Array()
            for(var i=0; i<data.length; i++)
            {
                linechart_online_machines.config.data.labels.push(data[i][0])
                linechart_online_machines.config.data.datasets[0].data.push(data[i][1])
                linechart_online_machines.config.data.datasets[1].data.push(data[i][2])
            }
            linechart_online_machines.update();
        }
        function myInterval(){
            $.getJSON("/balance_summary_info",
            function (data) { 
                updatechart(data)
             });
        }
        $(window).ready(function () {
            $.getJSON("/balance_summary_info",
            function (data) { 
                updatechart(data)
             });
            setInterval("myInterval()", 5000);
            $('#table_tools').bootstrapTable({
                url:'/balance_info',
                search:false,
                showRefresh:false,
                pagination:true,
                pageNumber:1,
                pageSize:10,
                pageList: [10, 25, 50, 100],
                toolbar: '#toolbar',
                classes: 'table-no-bordered',
                striped: true,
                columns: [{
                    field: 'ID',
                    title: 'ID',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    field: 'Platform',
                    title: 'Platform',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'ETH',
                    title: 'ETH',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'BTC',
                    title: 'BTC',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'EOS',
                    title: 'EOS',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'CYN',
                    title: 'CYN',
                    align: 'center',
                    valign: 'middle'
                }],
                onRefresh: function () {
                }
            });

            $('#table_summary').bootstrapTable({
                url:'/balance_last_info',
                search:false,
                showRefresh:false,
                pagination:false,
                pageNumber:1,
                pageSize:50,
                pageList: [10, 25, 50, 100],
                toolbar: '#toolbar',
                classes: 'table-no-bordered',
                striped: true,
                columns: [{
                    field: 'ID',
                    title: 'ID',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    field: 'Coin',
                    title: 'Coin',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'Quantity',
                    title: 'Quantity',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'Percent',
                    title: 'Percent',
                    align: 'center',
                    valign: 'middle'
                }],
                onRefresh: function () {
                }
            });
        })
    </script>
{% endblock %}
